<template>
  <div>
    <a-page-header
      title="角色管理"
      :ghost="false"
      sub-title="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景"
    />

    <a-card class="mt-1" size="small">
      <a-form
        :model="searchForm"
        label-align="left"
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 16 }"
        layout="inline"
      >
        <a-row align="middle">
          <a-col :span="4">
            <a-form-item label="角色名">
              <a-input placeholder="角色名" v-model:value="searchForm.name" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="角色编码">
              <a-input placeholder="角色编码" v-model:value="searchForm.code" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button html-type="reset" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card class="mt-1" size="small">
      <div style="margin-bottom: 8px">
        <a-button size="small" type="primary" @click="showModal(undefined)">
          添加
        </a-button>
      </div>

      <a-table
        bordered
        size="middle"
        :data-source="data"
        :columns="columns"
        rowKey="code"
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
      >
        <template #operation="{ record }">
          <a @click="showModal(record)">修改</a>
          <a-divider type="vertical" />
          <router-link
            :to="{
              name: 'RolePermission',
              params: { code: record.code.toLowerCase() },
            }"
          >
            权限
          </router-link>
        </template>
      </a-table>
    </a-card>

    <teleport to="body">
      <a-modal
        :title="isNew ? '添加' : '修改'"
        v-model:visible="visible"
        :confirm-loading="modalLoading"
        @ok="handleOk"
      >
        <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="角色名" v-bind="validateInfos.name">
            <a-input placeholder="角色名" v-model:value="formState.name" />
          </a-form-item>
          <a-form-item
            v-if="isNew"
            label="角色代码"
            v-bind="validateInfos.code"
          >
            <a-input
              addon-before="R_"
              placeholder="角色名"
              v-model:value="formState.code"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </teleport>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import {
  Empty,
  Card,
  Col,
  Row,
  PageHeader,
  Table,
  Button,
  Input,
  Form,
  Divider,
  Modal,
  message,
  Tag,
  Spin,
} from 'ant-design-vue';
import { useForm } from '@ant-design-vue/use';
import { Icon } from '@/components';
import { useRole } from './hooks/useRole';
import { createRole, updateRole } from '@/api/role';

export default defineComponent({
  components: {
    AEmpty: Empty,
    ACard: Card,
    ACol: Col,
    ARow: Row,
    APageHeader: PageHeader,
    ATable: Table,
    AButton: Button,
    AInput: Input,
    AForm: Form,
    AFormItem: Form.Item,
    ADivider: Divider,
    AModal: Modal,
    ATag: Tag,
    Icon: Icon,
    ASpin: Spin,
  },
  setup() {
    const searchForm = reactive({
      name: '',
      code: '',
    });

    const {
      columns,
      data,
      loading,
      pagination,
      handleTableChange,
      search,
    } = useRole(searchForm);

    const isNew = ref(true);
    const visible = ref(false);
    const formState = reactive({
      id: '',
      name: '',
      code: '',
    });
    const rulesRef = reactive({
      code: [{ required: true, message: '角色编码不能为空', whitespace: true }],
    });
    const { validate, validateInfos, resetFields } = useForm(
      formState,
      rulesRef,
    );
    const showModal = (role: any) => {
      visible.value = true;
      if (role != undefined) {
        Object.assign(formState, role);
        isNew.value = false;
      } else {
        isNew.value = true;
        resetFields();
      }
    };

    const modalLoading = ref(false);
    const handleOk = async () => {
      try {
        await validate();
      } catch (e) {
        console.log(e);
        return;
      }

      modalLoading.value = true;
      const res = isNew
        ? await createRole(formState)
        : await updateRole(formState);

      if (res?.status == 200) {
        message.info(res.message);
      } else {
        message.info('操作失败');
      }

      visible.value = false;
      modalLoading.value = false;
    };

    return {
      search,
      searchForm,
      pagination,
      handleTableChange,
      data,
      columns,
      loading,

      visible,
      isNew,
      formState,
      modalLoading,
      showModal,
      handleOk,
      validateInfos,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
